
<div id="sidebar">
  <div class="loginOrReg clear-outer"><a href="/login.html">登录</a>
    <div class="divide"></div><a href="/reg.html">注册</a>
  </div>
  <div class="user-info">
    <div class="user-avatar"><img src="{{avatar}}"/></div>
    <div class="user-name">{{username}}</div>
  </div>
  <ul id="side-list">
    <li id="good-btn" data-state="close" class="one-li">
      <div class="one-li-top"><a href="" class="li-info">
          <div class="li-logo"><img src="/static/img/good.png"/></div>
          <div class="li-title">商品分类</div></a>
        <div ng-click="toggleOpen($event)" class="son-menu-btn"></div>
      </div>
      <div class="son-menu">
        <div data-kind="coin" ng-click="chooseKind($event)" class="son-item">金币</div>
        <div data-kind="equip-list" ng-click="chooseKind($event)" class="son-item">装备</div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </li>
    <li id="game-btn" data-state="close" class="one-li">
      <div class="one-li-top"><a href="" class="li-info">
          <div class="li-logo"><img src="/static/img/game.png"/></div>
          <div class="li-title">游戏</div></a>
        <div id="game-open" ng-click="toggleOpen($event)" class="son-menu-btn"></div>
      </div>
      <div class="son-menu">
        <div ng-repeat="game in gameList" ng-click="getAreaServer(game,$event)" id="{{game}}" class="son-item">{{game}}</div>
      </div>
      <div class="clear"></div>
    </li>
    <li id="area-btn" data-state="close" class="one-li">
      <div class="one-li-top"><a href="" class="li-info">
          <div class="li-logo"><img src="/static/img/area.png"/></div>
          <div class="li-title">区服</div></a>
        <div id="area-open" ng-click="toggleOpen($event)" class="son-menu-btn"></div>
      </div>
      <div id="area" ng-show="changeBool" class="son-menu">
        <div ng-repeat="(key,value) in areaServerObj" ng-click="setArea(key,$event)" class="area-item son-item {{key}}">{{key}}</div>
      </div>
      <div id="server" ng-show="!changeBool" class="son-menu">
        <div ng-repeat="server in serverList" ng-click="setServer(server,$event)" class="server-item son-item {{server}}">{{server}}</div>
      </div>
      <div class="change">
        <div data-tar="area" ng-class="{true:'active',false:''}[changeBool]" ng-click="change($event)" class="one active"></div>
        <div data-tar="server" ng-class="{true:'',false:'active'}[changeBool]" ng-click="change($event)" class="one"></div>
      </div>
      <div class="clear"></div>
    </li>
    <li id="history-btn" data-state="close" class="one-li">
      <div class="one-li-top"><a href="" class="li-info">
          <div class="li-logo"><img src="/static/img/history.png"/></div>
          <div class="li-title">历史记录</div></a>
        <div ng-click="toggleOpen($event)" class="son-menu-btn"></div>
      </div>
      <div class="son-menu"></div>
      <div class="clear"></div>
    </li>
  </ul>
</div>